<template>
  <div class="add-wrap">
    <el-form
      :inline="true"
      :model="ruleform"
      ref="from"
      :rules="rules"
      class="demo-form-inline ip-form"
    >
      <el-form-item label="用户名" prop="user_wanted">
        <el-input
          v-model="ruleform.user_wanted"
          minlength="5"
          style="width:400px"
          message
          placeholder="用户名至少3位可包含(英文开头、数字、中划线、下划线)"
        ></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="nick_name">
        <el-input
          v-model="ruleform.nick_name"
          style="width:160px"
          message
          placeholder
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="user_pwd">
        <el-input
          v-model="ruleform.user_pwd"
          :type="flag == true ? 'password' : 'text'"
          style="border:1px solid #fff;width:250px;"
          placeholder
        >
          <i
            slot="suffix"
            :class="[flag == true ? 'el-icon-minus' : 'el-icon-view']"
            style="margin-top:8px;font-size:18px;"
            autocomplete="auto"
            @click="flag = !flag"
          />
        </el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email" show-overflow-tooltip>
        <el-input v-model="ruleform.email" message placeholder></el-input>
      </el-form-item>

      <el-form-item label="手机号" prop="mobile" show-overflow-tooltip>
        <el-input
          v-model.number="ruleform.mobile"
          message
          placeholder
        ></el-input>
      </el-form-item>
      <el-form-item label="登录有效期" prop="token_expired">
        <el-select v-model="ruleform.token_expired" placeholder="请选择">
          <el-option label="永不失效" :value="0"></el-option>
          <el-option label="10分钟" :value="10"></el-option>
          <el-option label="30分钟" :value="30"></el-option>
          <el-option label="60分钟" :value="60"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="选择角色" prop="selRole">
        <el-checkbox-group v-model="ruleform.selRole">
          <el-checkbox
            :label="item.role_id"
            :key="item.role_name"
            v-for="item in roleLabel"
            >{{ item.role_name }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <br /> -->
      <!-- <el-form-item label="选择分组" prop="selOrganization">
        <el-checkbox-group v-model="ruleform.selOrganization">
          <el-checkbox
            :label="item.org_id"
            :key="item.org_name"
            v-for="item in organizationLabel"
            >{{ item.gfather_name+" - "+item.father_name+" - "+item.org_name }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <br /> 
      <el-form-item label="选择业务范围--设备" prop="businessRange">
        <el-radio-group v-model="ruleform.businessRange">
          <el-radio :label="-1">全部禁止</el-radio>
          <el-radio :label="0">全部允许</el-radio>
          <el-radio :label="1">指定范围</el-radio>
        </el-radio-group>
      </el-form-item>-->
      <el-form-item class="btn-wrap">
        <el-button type="primary" plain @click="onSubmit('from')"
          >注册</el-button
        >
        <el-button type="warning" plain @click="onReset('from')"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getData, postData } from "@/request/http";
import { resetForm } from "@/utils/Tool";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    var checkPass = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入密码"));
      } else {
        // if (this.ruleform.user_pwd !== "") {
        //   this.$refs[ruleform].validateField("checkPass");
        // }
        callback();
      } 
    };
    // 自定义验证邮箱
    var checkEmail = (rule, value, callback) => {
      //const regEmail = /^([a-zA-Z0-9])+@([a-zA-Z0-9_-])+([a-zA-Z0-9_-])+/;
      const regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      if (regEmail.test(value)) {
       // console.log(regEmail.test(value));
        return callback();
      } else if (value == "") {
        return callback();
      } else {
        callback(new Error("请输入合法邮箱"));
        //callback();
      }
    };
    // 自定义验证手机号
    var checkPhone = (rule, value, callback) => {
     // console.log(typeof value, "\\\\/");
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/;
      if (!Number.isInteger(+value)) {
        callback(new Error("请输入数字值"));
      } else if (value == "") {
        return callback();
      } else {
        if (phoneReg.test(value)) {
          callback();
        } else {
          callback(new Error("电话号码格式不正确"));
          // callback();
        }
      }
    };
    return {
      flag: false, //密码明文暗文
     // roleLabel: [], //添加中，角色的label
      //organizationLabel: [], //添加中，组织分组的label
      //AddForm组件的添加
      ruleform: {
        //selRole: [],
        // selOrganization: [],
        // businessRange: "-1",
        user_wanted: "",
        nick_name: "",
        user_pwd: 888888,
        mobile: "",
        email: "",
        token_expired: 30,
      },
      rules: {
        user_wanted: [
          {
            required: true,
            // pattern: /^[a-zA-Z]+$/,
            message: "用户名只能为英文开头、数字、中划线、下划线",
            trigger: "blur",
          },
        ],
        user_pwd: [
          {
            validator: checkPass,
            required: false,
            message: "请输入密码",
            trigger: "change",
          },
        ],
        nick_name: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          // {
          //   pattern: /^[\u4E00-\u9FA5]+$/,
          //   message: "用户名只能为中文"
          // }
        ],
        mobile: [
          { required: false, message: "请输入手机号码", trigger: "blur" },
          { validator: checkPhone, trigger: "blur" },
        ],
        email: [
          { required: false, message: "请输入邮箱", trigger: "blur" },
          { validator: checkEmail, trigger: "blur" },
        ],
        token_expired: [{ required: false, message: "", trigger: "blur" }],
        /* selRole: [
          {
            type: "array",
            required: false,
            message: "请至少选择一个角色",
            trigger: "change",
          },
        ],
        selOrganization: [
          {
            type: "array",
            required: false,
            message: "请至少选择一个组织分组",
            trigger: "change",
          },
        ], 
        businessRange: [
          { required: false, message: "请选择业务范围", trigger: "blur" },
        ],*/
      },
    };
  },
  computed: {},
  created() {},
  mounted() {
    // this.getRoleLabel();
    // this.getOrgLabel();
  },
  methods: {
    /* 获取管理员的角色label */
    // getRoleLabel() {
    //   postData("/adminweb/role/list", {})
    //     .then((res) => {
    //      // console.log(res);
    //       if (res.code == 0) {
    //         let roles = res.datas.roles;
    //         this.roleLabel = roles;
    //       } else if (res.code == -56055) {
    //         return;
    //       } else {
    //         this.$message.error(res.code + "，" + res.msg);
    //       }
    //     })
    //     .catch((res) => {
    //       this.$message.error(res.code + "，" + res.msg);
    //     });
    // },
    /* 获取管理员的组织分组的label */
    // getOrgLabel() {
    //   postData("/adminweb/org/list", {})
    //     .then((res) => {
    //     //  console.log(res);
    //       if (res.code == 0) {
    //         let orgs = res.datas.orgs;
    //         this.organizationLabel = orgs;
    //       } else if (res.code == -56055) {
    //         return;
    //       } else {
    //         this.$message.error(res.code + "，" + res.msg);
    //       }
    //     })
    //     .catch((res) => {
    //       this.$message.error(res.code + "，" + res.msg);
    //     });
    // },
    //添加 提交
    // orgs: that.ruleform.selOrganization,
    // bizfors: [
    //   {
    //     biz_type: 0,
    //     biz_for: that.ruleform.businessRange,
    //   },
    // ],
    onSubmit(formName) {
      var that = this;

      that.$refs[formName].validate((valid) => {
        if (that.ruleform.user_wanted == "" || that.ruleform.nick_name == "") {
          return;
        }
        if (valid) {
          postData("/adminweb/sys/admin/register", {
            user_wanted: that.ruleform.user_wanted,
            user_pwd: that.ruleform.user_pwd,
            nick_name: that.ruleform.nick_name,
            mobile: that.ruleform.mobile,
            email: that.ruleform.email,
            token_expired: Number(that.ruleform.token_expired),
          })
            .then((res) => {
              if (res.code == 0) {
                that.$message.success("添加成功！");
                //更新tabel组件
                that.$store.commit(
                  "setSubmitData",
                  Math.floor(Math.random() * 10000000)
                );
                let datas = resetForm(that.ruleform, this.$refs[formName]);
                that.ruleform = datas;
                this.$refs[formName].resetFields();
              } else {
                that.$message.error(res.code + "，" + res.msg);
              }
            })
            .catch((res) => {
              that.$message.error(res.code + "，" + res.msg);
            });
        } else {
          that.$message.error("添加失败");
          return false;
        }
      });
    },
    // 重置
    onReset(val) {
      this.$refs[val].resetFields();
    },
  },
  watch: {},
};
</script>
<style scoped>
.add-wrap {
  padding: 15px;
}
.add-wrap >>> .btn-wrap {
  margin-left: 60px;
}
</style>
